<template>
  <div :class="['condition-body', props.data.operator1 === 'bt' ? 'flex-direction-column': 'flex-direction-row']">
    <div class="type">
      <el-select v-model="props.data.operator1" class="max-width" @change="changeType">
        <el-option v-for="item in operators" :label="item.label" :value="item.name" />
      </el-select>
    </div>
    <div v-if="props.data.operator1 === 'bt'" class="content">
      <div class="bt-item">
        <el-input-number v-model="props.data.value1" :precision="2" controls-position="right"/>
      </div>
      <div class="bt-item">
        <el-select v-model="props.data.operator2" class="max-width">
          <el-option v-for="item in operatorsForBt" :label="item.symbol" :value="item.name"/>
        </el-select>
      </div>
      <div class="bt-item text">{{props.data.label}}</div>
      <div class="bt-item">
        <el-select v-model="props.data.operator3" class="max-width">
          <el-option v-for="item in operatorsForBt" :label="item.symbol" :value="item.name"/>
        </el-select>
      </div>
      <div class="bt-item">
        <el-input-number v-model="props.data.value2" :precision="2" controls-position="right"/>
      </div>

    </div>
    <div v-else class="content">
      <el-input-number v-model="props.data.value1" class="max-width" :precision="2" controls-position="right"/>
    </div>

  </div>
</template>

<script setup>
import {BT, EQ, GE, GT, IN, INE, LE, LT, NE} from "@/components/EasyProcess/config/conditionOperator";

import {getCurrentInstance, onMounted} from "vue";

const { proxy } = getCurrentInstance();

const operators = [EQ, NE, GT, GE, LT, LE, BT]
const operatorsForBt = [LT, LE]

const props = defineProps({
  data: {
    type: Object,
    default: {}
  }
});

onMounted(async () => {
  init()
});
function init() {
  if (!props.data.operator1) {
    props.data.operator1 = LE.name
  }
  if (!props.data.value1) {
    props.data.value1 = null
  }
}

function changeType() {
  if (props.data.operator1 === BT.name) {
    props.data.operator2 = LT.name
    props.data.operator3 = LT.name
  } else {
    props.data.operator2 = null
    props.data.operator3 = null
  }
}
</script>

<style scoped lang="scss">
.condition-body {
  width: 100%;
  .type {
    flex: 1;
    margin-bottom: 10px;
  }

  .content {
    flex: 2;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    justify-content: center;
    align-items: center;

    .bt-item {
      flex: 1
    }
    .text {
      text-align: center;
    }
  }
}
.flex-direction-row {
  display: flex;
  flex-direction: row;
}
.flex-direction-column {
  display: flex;
  flex-direction: column;
}

.max-width {
  width: 100%;
}
</style>